<template>
	<view class="comment-header">
		<image style="width: 100rpx;height: 100rpx;" :src="picHref"></image>
		<view class="username">
			<view class="top">
				<text class='name'>{{userInfo.username}}</text>
				<uni-icons v-if='userInfo.is_verified' type="checkbox-filled" size="20"></uni-icons>
			</view>
			<view style="max-width: 100vw;">
				<text :selectable="true" class="comtents">{{trans(datas.text)}}</text>
			</view>
			<view class="flex colum-gap-30">
				<text>{{commentTime}}</text>
				<text>{{datas.comment_like_count}}次赞</text>
				<text v-if="datas.isWx" @click="replay">回复</text>
				<text v-if="datas.isWx" style="float: right;">该评论来自小程序</text>
				<text v-else style="float: right;">该评论来自ins</text>
			</view>
		</view>
	</view>
</template>

<script>
	import Config from "@/common/config.js"
	import {transformTime} from "@/utils/utils.js"
	
	export default{
		props:{
			datas:{
				type:Object,
				default:function(){
					return {}
				}
			}
		},
		methods:{
			replay(){
				console.log("回复")
			},
			trans(val){
				let con;
				try{
					con = atob(val)
				}catch(e){
					con = val
				}
				return unescape(con.replace(/\\u/g, '%u'))
			}
		},
		computed:{
			picHref(){
				let userId = this.datas?.user_id;
				return (this.datas.isWx && this.datas.user) ? Config.static_url + this.datas.user.avatar : Config.static_url + 'comment_user/' + `${userId}.jpg`;
			},
			userInfo(){
				let user;
				try{
					user = this.datas.isWx ? this.datas.user : typeof this.datas.user == 'string' ? JSON.parse(this.datas.user.replaceAll("'",'"').replaceAll('False','false').replaceAll('True','true')) : this.datas.user
				}catch(e){
					console.log('err',e)
					user = this.datas.user
				}
				return this.datas?.user ? user : {};
			},
			commentTime(){
				console.log(this.datas)
				return transformTime(this.datas.created_at_utc)
			},
		}
	}
	
</script>

<style lang="scss" scoped>
	.comment-header {
		display: flex;
		min-height: 120rpx;
		justify-content: flex-start;
		padding: 25rpx 15rpx;
		column-gap: 10rpx;
	
		image {
			height: 100rpx;
			width: auto;
			aspect-ratio: 1/1;
			border-radius: 100%;
			object-fit: cover;
		}
	
	
		.username {
			flex: 1;
			padding: 0 4rpx;
			display: flex;
			flex-direction: column;
			row-gap: 10rpx;
	
			.top {
	
				.name {
					font-weight: 700;
				}
	
				.authentication {
					height: auto;
					width: 50rpx;
					aspect-ratio: 1/1;
					background-image: url('~@/static/all.png');
					// background-position: buttom 50rpx right 1rpx ;
					background-position: right -50rpx center 10rpx;
				}
			}
	
		}
	}
</style>